<template>
  <div class="mytree">
    <el-tree
      :props="props"
      :load="loadNode"
      lazy
      >
      <span
     class="custom-tree-node"
     slot-scope="{ data }"
   >
       <span @click="enterFm(data)">{{data.name}}</span>
       <span  class="treeClass">详情</span>
   </span>
    </el-tree>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        
        props: {
          label: 'name',
          children: 'zones'
        },
        count: 1
      };
    },
    created(){
      // let data='[{"name":"xiaoming","age":"18"}]'
      // //let data='[{name:"xiaoming",age:"18"},{name:"xiaohong",age:"18"}]'
      // let one=JSON.parse(data)
      // console.log(one)

    },
    methods: {
      enterFm(data){
         console.log('我点击触发的 ////////////////////')
         console.log(data)
      },
      handleNodeClick(data) {
        console.log(data);
      },
      loadNode(node, resolve) {
        console.log('lllllll')
        console.log(node)
        console.log(node.data)
        console.log('lllllll')
        
        if (node.level === 0) {
          return resolve([{ name: 'region1' }, { name: 'region2' }]);
        }

        if (node.level > 3) return resolve([]);

        var hasChild=true;
        // if (node.data.name === 'region1') {
        //   hasChild = true;
        // } else if (node.data.name === 'region2') {
        //   hasChild = false;
        // } else {
        //   //hasChild = Math.random() > 0.5;
        // }
        
        setTimeout(() => {
          var data;
          if (hasChild) {
            data = [{
              name: 'zone' + this.count++
            }, {
              name: 'zone' + this.count++
            }];
          } else {
            data = [];
          }

          resolve(data);
        }, 500);



      }
    }
  };
</script>

<style lang="scss" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  padding-top:10px;
  padding-bottom:10px;
  margin-bottom: 10px;
  margin-top: 10px;

}



 .mytree::v-deep {
    .el-tree .el-tree-node {
         padding-top:10px;
         padding-bottom:10px;
         margin-bottom: 10px;
         margin-top: 10px;
        //  background-color: #eee;
        .el-tree-node__content{
          //background-color: #eee;
        }

    }
  
 }


// ::v-deep.el-tree-node__content{
//   &:hover{
//     background-color: red;
//   }
// }

     
</style>